<template>
	<div class="bD_WorkCenter-container">
		<el-row>
			<el-col :xs="24" :sm="verticalStation()" :md="verticalStation()" :lg="verticalStation()"
				:xl="verticalStation()">
				<el-card v-if="queryParams.queryType==1&&StationList.length>0" style="min-height: 195;">
					<!-- <el-alert title="系统默认显示当日进度,可根据'工位执行进度日期'搜索!" type="info" center show-icon /> -->
					<el-table :data="StationList" height="195" style="width: 100%" ref="stationMultipleTableRef"
						@select="stationHandleSelectionChange" v-loading="stationLoading" row-key="id"
						:expand-row-keys="stationExpandList" @expand-change="handleStationExpandChange">
					<!-- 	<el-table-column type="expand">
							<template #default="scope">

							</template>
						</el-table-column> -->
						<el-table-column  width="30" type="selection" align="center" :selectable="checkTable" />
					<!-- 	<el-table-column type="index" label="No" width="33">
							<template #default="scope">
							</template>
						</el-table-column> -->
						<el-table-column prop="name" label="工位名称" align="center" width="200" show-overflow-tooltip="">
						</el-table-column>
						<el-table-column prop="name" label="状态" align="center" width="300" show-overflow-tooltip="">
							<template #default="scope">
							<el-tag size="small" class="ml5"
									type="success">{{scope.row.orderStatusWaitStart}}</el-tag>
								<el-tag size="small" class="ml5"
									type="warning">{{scope.row.orderStatusPreWorking}}</el-tag>
								<el-tag size="small" class="ml5"
									type="success">{{scope.row.orderStatusWorking}}</el-tag>
								<el-tag size="small" class="ml5" type="danger">{{scope.row.orderStatusStop}}</el-tag>	
							</template>
						</el-table-column>
						<el-table-column prop="requirementPercentage" label="工位负荷" align="center" width="210"
							show-overflow-tooltip="">
							<template #default="scope">
								<el-progress class="text-center" :percentage="scope.row.requirementPercentage" striped
									striped-flow />
							</template>
						</el-table-column>
						<el-table-column v-for="item in dateList" :key="item" :label="item" align="center" width="220"
							show-overflow-tooltip="">
							<template #default="scope">
								<el-progress class="text-center icon-shine"
									v-if="getDatePercentage(scope.row.datePercentageList,item).percentage>=100"
									:percentage="getDatePercentage(scope.row.datePercentageList,item).percentage"
									status="success" striped striped-flow />
								<el-progress
									v-else-if="getDatePercentage(scope.row.datePercentageList,item).percentage<100&&getDatePercentage(scope.row.datePercentageList,item).percentage>0"
									:percentage="getDatePercentage(scope.row.datePercentageList,item).percentage"
									striped striped-flow />
								<el-progress v-else
									:percentage="getDatePercentage(scope.row.datePercentageList,item).percentage"
									status="exception" striped striped-flow />
							</template>
						</el-table-column>
					</el-table>
				</el-card>
				<!-- class="scroll-card"  添加滚动条-->
				
				<el-card  v-else-if="queryParams.queryType==2&&StationList.length>0">
					<vue3-seamless-scroll ref="vue3SeamlessScrollRef"  class="v-s-s" :list="StationList" :step="1.5" :hover="true">
					<!-- <el-alert title="工位当日加工信息!" type="info" center show-icon class="mb10" /> -->
					<el-row :gutter="1" class="v-s-s_item ">
						<el-col :span="8" v-for="item in StationList" >
							<el-badge :value="item.currentStationStatus==-1?'空闲':'运行'"
								:type="item.currentStationStatus==-1?'error':'primary'" class="station_item_card">
								<el-card v-loading="stationLoading"  class="box-card myel-card" 
									:style="item.currentStationStatus==-1?'background-color: rgb(255 199 199);':'background-color:rgb(171 209 250 / 68%);'"
									align="middle">
									<template #header>
										<div class="card-header">
											<span style="font-size: 20px;">{{item.name}}</span>
										</div>
									</template>
									<div class="el-card__body mid" >
										<p>
											<el-tag style="margin-left:10px;" type="success">{{item.orderStatusWaitStart}}</el-tag>
											<el-tag style="margin-left:10px;" type="warning">{{item.orderStatusPreWorking}}</el-tag>
											<el-tag style="margin-left:10px;" type="success">{{item.orderStatusWorking}}</el-tag>
											<el-tag style="margin-left:10px;" type="danger">{{item.orderStatusStop}}</el-tag>
										</p>
										<el-descriptions title="派工单信息" :column="1" border size="small" style="margin-top:10px;">
											<template #extra>
												<el-tag type="danger">当前订单：{{item.wCode}}</el-tag>
												
											</template>
											<el-descriptions-item>
												<template #label>
													<div style="width:60px;">
														加工中工单
													</div>
												</template>
												<el-tag>
												<el-tooltip :content="item.pCode">
												   <div class="ellipsis">{{ item.pCode }}</div>
												 </el-tooltip>
												</el-tag>
											</el-descriptions-item>
											<el-descriptions-item>
												<template #label>
													<div>
														物料信息
													</div>
												</template>
												<el-tag>
												 <el-tooltip :content="item.materialInfo">
												    <div class="ellipsis">{{ item.materialInfo }}</div>
												  </el-tooltip>
											    </el-tag>  
											</el-descriptions-item>
											<el-descriptions-item>
												<template #label>
													<div class="cell-item">
														数量统计
													</div>
												</template>
												<el-tag style="margin-left:2px;" type="danger">需求数量:{{item.original_Qty}}</el-tag>
												<el-tag style="margin-left:2px;" type="success">完工数量:{{item.complateqty}}</el-tag>
												<el-tag style="margin-left:2px;margin-top:2px;" type="warning">剩余数量:{{item.remainingQty}}</el-tag>
											</el-descriptions-item>
											<el-descriptions-item>
												<template #label>
													<div class="cell-item">
														预加工工单
													</div>
												</template>
												<el-tag v-for="preItem in item.preInfos" class="ml10" type="warning">
													<el-tooltip :content="preItem">
													   <div class="ellipsis">{{ preItem }}</div>
													 </el-tooltip>
												</el-tag>
											</el-descriptions-item>

											<el-descriptions-item>
												<template #label>
													<div class="cell-item">
														今日完工比	
													</div>
												</template>
												<el-progress class="text-center icon-shine" v-if="item.percentage>=100"
													:percentage="item.percentage" status="success" striped
													striped-flow />
												<el-progress v-else-if="item.percentage<100&&item.percentage>0"
													:percentage="item.percentage" :indeterminate="true" :duration="5"
													striped striped-flow />
												<el-progress v-else :percentage="item.percentage" status="exception"
													striped striped-flow />
											</el-descriptions-item>

										</el-descriptions>

										<div class="bottom">
											<el-divider />

										</div>
									</div>
									
								</el-card>
							</el-badge>
						</el-col>
					</el-row>
		          </vue3-seamless-scroll>
				</el-card>
	
			</el-col>

		</el-row>
	</div>
</template>

<script lang="ts" setup="" name="bD_WorkCenter">
	import { ref, reactive, onMounted, onUnmounted } from "vue";
	import { useRoute } from 'vue-router';
	import _ from 'lodash';
	import {http} from '@/api/http';
	import {ContentTypeEnum,RequestHttpEnum,ModuleTypeEnum} from '@/enums/httpEnum';
	import {
		Vue3SeamlessScroll
	} from 'vue3-seamless-scroll';
	
	const vue3SeamlessScrollRef = ref();
	const state = reactive({
		loading: false,

		queryParams: {
			fileName: undefined,
			startTime: undefined,
			endTime: undefined,
		},
		tableParams: {
			page: 1,
			pageSize: 10,
			total: 0 as any,
		},
		dialogUploadVisible: false,
		dialogPdfVisible: false,
		dialogInfoVisible: false,
		dialogInfoContent: '',
		fileList: [] as any,
		pdfUrl: '',
	});
	const timer = ref<any>();
	const expandList = ref<any>([]);
	const stationExpandList = ref<any>([]);
	const loading = ref(false);
	const stationLoading = ref(false);
	const tableData = ref<any>([]);
	const multipleTableRef = ref<InstanceType<typeof ElTable>>();
	const multipleSelection = ref<any>([]);

	const stationMultipleTableRef = ref<InstanceType<typeof ElTable>>();
	const stationMultipleSelection = ref<any>([]);
	const dateList = ref<any>([]);
	const StationList = ref<any>([]);
	const toggleSelection = (rows ?: []) => {
		multipleTableRef.value.clearSelection()
	}
	const queryParams = ref<any>({
		queryType: 2
	});

	let timerId = null;
	const tableParams = ref({
		page: 1,
		pageSize: 10,
		total: 0,
		frontPath: null
	});
	const editBD_WorkCenterTitle = ref("");

	var props = defineProps({
		info: {
			default: {},
		},
		permutationType: String  //排列方式：父组件传过来的值     cross  vertical
	});
	//父级传递来的函数，用于回调
	const emit = defineEmits(["reloadTable"]);
	const verticalWorkCenter = () => {
		// if (props.permutationType != undefined && props.permutationType == 'vertical') {
		// 	return 24;
		// }
		return 24;
	};
	const verticalStation = () => {
		// if (props.permutationType != undefined && props.permutationType == 'vertical') {
		// 	return 24;
		// }
		return 24;
	}

	// 页面加载时
	onMounted(async () => {
		const route = useRoute();
		tableParams.value.frontPath = route.path;
		handleQuery();
		// timerToRefreshStations(60000 * 3);
	});

	onUnmounted(() => {
		// 清除定时器
		if (timerId) {
			clearInterval(timerId);
			timerId = null;
		}
	});
	// 勾选框是否禁用

	const checkTable = (row, index) => {
		if (row.id) {
			return true; //不禁用
		}
		return false; //禁用
	};

	//行颜色
	const tableRowClassName = (every) => {
	}

	// 打开上传页面
	const openUploadDialog = () => {
		state.fileList = [];
		state.dialogUploadVisible = true;
	};

	// 通过onChanne方法获得文件列表
	const handleChange = (file : any, fileList : []) => {
		state.fileList = fileList;
	};

	

	

	

	// 查询操作
	const handleQuery = async () => {
		timer.value = new Date().getTime();
		loading.value = true;
		if (props.info.id > 0) {
			// queryParams.value.standardId = props.info.id; //展开行对应的id赋值
		}
		let url =`${ModuleTypeEnum.PROJECT}/stationSchedulePage`;
		http(RequestHttpEnum.POST)(url, Object.assign(queryParams.value, tableParams.value))
			.then(res => {
			
				tableData.value = res.data.items ?? [];
				tableParams.value.total = res.data.total;
				loading.value = false;

				if (tableParams.value.total > 0) {
					handleSelectionChange([tableData.value[0]]);
				}
			});
	};


	const handleExpandChange = (row : any, expandedRows : any) => {
		timer.value = new Date().getTime();
		if (expandedRows.length) {
			expandList.value = [];
			if (row) {
				expandList.value.push(row.id);
			}
		} else {
			expandList.value = [];
		}
	};

	const handleStationExpandChange = (row : any, expandedRows : any) => {
		if (expandedRows.length) {
			stationExpandList.value = [];
			if (row) {
				stationExpandList.value.push(row.id);
			}
		} else {
			stationExpandList.value = [];
		}
	};

	const expandStationLoadPOrders = () => {

	}


	// 改变页面容量
	const handleSizeChange = (val : number) => {
		tableParams.value.pageSize = val;
		handleQuery();
	};

	// 改变页码序号
	const handleCurrentChange = (val : number) => {
		tableParams.value.page = val;
		handleQuery();
	};


	const handleSelectionChange = (val : []) => {
		multipleSelection.value = val
		if (val.length > 1) {
			let del_row = val.shift();
			multipleTableRef.value.toggleRowSelection(del_row, false);
		}
		multipleSelection.value = multipleSelection.value[0];


		if (multipleSelection.value != undefined) {
			handleSelectionChangeShowSchedule(multipleSelection.value);
		} else {
		}

	}

	const timerToRefreshStations = (time : number) => {
		// timerId = setInterval(() => {
		// 	if (multipleSelection.value != undefined &&
		// 		multipleSelection.value != null &&
		// 		multipleSelection.value.id > 0) {
		// 		handleSelectionChangeShowSchedule(multipleSelection.value);
		// 	}
		// }, time);
	}

	// stationMultipleTableRef= ref<InstanceType<typeof ElTable>>();
	// const stationMultipleSelection = ref<any>([]);
	const stationHandleSelectionChange = (val : []) => {
		stationMultipleSelection.value = val
		if (val.length > 1) {
			let del_row = val.shift();
			stationMultipleTableRef.value.toggleRowSelection(del_row, false);
		}
		stationMultipleSelection.value = stationMultipleSelection.value[0];
		//工位选中不去加载派工单,但是需要给选中的行赋值
		if (stationMultipleSelection.value != undefined) {
			// emit("reloadTable", multipleSelection.value, stationMultipleSelection.value); //工位选中
		} else {
			// emit("reloadTable", multipleSelection.value, {}); //工位选中
		}
	}
	// stationMultipleTableRef
	const handleSelectionChangeShowSchedule = async (selection : any) => {
		var query = Object.assign(queryParams.value, tableParams.value);
		if (selection != null)
			query.workCenterId = selection.id;
		stationLoading.value = true;
		let url =`${ModuleTypeEnum.PROJECT}/stationLoadSchedule`;
		http(RequestHttpEnum.POST)(url, query)
			.then(res => {
				if (res.data.result.dateList != null)
					dateList.value = res.data.result.dateList;
				StationList.value = res.data.result.stationList;
				stationLoading.value = false;
			});
	}
	//获取进度值
	const getDatePercentage = (datePercentageList : [], dateString : String) => {
		let percentage = 0;
		if (datePercentageList != null && datePercentageList.length > 0) {
			let model = datePercentageList.find(r => r.dateString == dateString);
			percentage = model.percentage;
		}
		return { percentage: percentage };
	}

	const queryTypeChange = () => {
		StationList.value = []
		multipleTableRef.value.clearSelection()
	}

	defineExpose({ handleSelectionChangeShowSchedule });
</script>
<style scoped lang='scss'>
	
	/* 隐藏全选按钮 */
	::v-deep .el-table th.el-table__cell:nth-child(1) .cell {
		visibility: hidden;
	}

	.myel-card {

		margin-right: 5px;
		transition: all .5s;
	}

	.myel-card:hover {
		margin-top: -5px;
	}

	.mid {
		/* margin-top: 25%; */
		/* height: 50%; */
	}

	.station_item_card {
		margin-top: 10px;
		margin-right: 40px;
	}

	.expand .el-table__expand-column .cell {
		display: none;
	}
	
	.ellipsis {
	  width: 200px; /* 定义容器宽度 */
	  white-space: nowrap; /* 确保文本在一行内显示 */
	  overflow: hidden; /* 隐藏超出容器的文本 */
	  text-overflow: ellipsis; /* 使用省略符号表示被截断的文本 */
	}
	
	.scroll-card {
	  height: 300px; /* 设置固定高度 */
	  overflow-y: auto; /* 垂直滚动 */
	}
	
	.v-s-s {
		/* height: 200px; */
		margin: 20px auto;
		overflow: hidden;
		/* font-size: 13px; */
	
		.v-s-s_item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 50px 0;
		}
	}
</style>